/**
 * Created by zhuo on 2017/4/4.
 */
function index_click() {
    $('#my-content').html('<index-component></index-component>')
    showIndex()
}

function showIndex() {
    Vue.component('index-component',{
        template : '#index-template'
    })

    new Vue({
        el : '#my-content'
    })
}

function showAbilityContain() {
    $('#my-content').html(
        '<div id="main" style="height: 800px;">Now Loading...</div>'
    )
}

function fillAbilityContain() {
    var myChart = echarts.init(document.getElementById('main'));
//    myChart.setOption(option);
    myChart.showLoading();
    $.get('/getIndexChart', function (obj) {
        myChart.hideLoading();

        var data = obj.data;
        var edge = obj.edge;

        var option = {
            title: {
                text: '能力分析'
            },
            tooltip: {
                formatter: function (params, ticket, callback) {
                    var str = '';
                    if (params.value != null) {
                        str += params.value;
                    }
                    return str;
                }
            },
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    symbol: 'circle',
                    symbolSize: 70,
                    roam: true,
                    draggable: true,
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 4
                        }
                    },
                    categories: [{name: 'first', itemStyle: {normal: {color: '#D2691E'}}},
                        {name: 'second', itemStyle: {normal: {color: '#008080'}}},
                        {name: 'third', itemStyle: {normal: {color: '#BA55D3'}}},
                        {name: 'forth', itemStyle: {normal: {color: '#483D8B'}}},
                        {name: 'fifth', itemStyle: {normal: {color: '#BDB76B'}}},
                        {name: 'sixth', itemStyle: {normal: {color: '#6A5ACD'}}}
                    ],
                    data: data,
                    links: edge,
                    force: {
                        initLayout: 'circular',
                        repulsion: 300,
                        edgeLength: 120
                    }
                }
            ]

        };

        myChart.setOption(option);
    }, "json")

    myChart.on('dblclick', function (params) {
        // 控制台打印数据的名称
        if (params.data.url != null || params.data.url != '') {
            window.open(params.data.url)
        }
    })
}

function on_ability_click() {
    showAbilityContain()
    fillAbilityContain()
}

